
// 引入path的模块
//引入path模块
const path = require('path')

//导出webpack 5大核心配置项
module.exports = {
  //1 入口(entry) 加载js入口文件
  entry: './js/index.js',
  //2 出口(output) 把打包的文件放在指定位置 和 指定命名
  output: {
    path: path.resolve(__dirname, 'dist'), //输出路径dist文件夹中
    filename: 'bundle.js',
  },
  //加载器
  module: {
    rules: [
      //处理css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      //处理less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      //处理图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          name: '[hash:16].[ext]', // 图片输出的名字hash长度16位 默认32位
          limit: 10 * 1024, // 小于10kb base64处理 // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
          esModule: false,
          outputPath: 'imgs', // 图片输出文件夹
        },
      },
    ],
  },
  //插件
  plugins: [],
  //模式
  mode: 'development',
}